import dayjs from 'dayjs'
// import { ReactComponent as MenuIcon } from '@/desktop/assets/menu.svg'
import { AvatarImage } from '@/desktop/components'
import SimpleChatRecord from '@/desktop/components/simple-chat-record'
import { type ContactItemProps } from '@/desktop/logics/contacts'
import { colors, ellipsis } from '@/desktop/styles'
import services from '@/services'
import { ChatRecordType } from '@/services/contact-chat'
import type { Contact } from '@/services/contacts'

export function ContactItem({
  contact,
  ownerQywx,
  isCurrent,
  unread,
  draft,
  style,
}: ContactItemProps) {
  const onClick = useCallback(() => services.contacts.current.mark(contact), [contact])

  const timeStr = useMemo(() => {
    if (contact.contacted === 0) return ''
    const time = dayjs(contact.contacted)
    const now = dayjs()
    if (time.isAfter(now.startOf('day'))) return time.format('HH:mm')
    if (time.isAfter(now.subtract(1, 'day').startOf('day'))) return '昨天'
    if (time.isAfter(now.startOf('year'))) return time.format('MM-DD')
    return time.format('YYYY-MM')
  }, [contact.contacted])

  return <div css={s.item} className={isCurrent ? 'current' : ''} style={style} onClick={onClick}>
    <AvatarImage size={avatarSize} radius={8} loading="lazy" src={contact.avatar} />
    <div className="info">
      <div className="name-row">
        <div className="name">{contact.name}</div>
        <div className="time">{timeStr}</div>
      </div>
      <div className="chat-row">
        <LatestChat contact={contact} draft={draft} unread={unread} />
        <div className="qywx">
          <span>{ownerQywx}</span>
        </div>
      </div>
    </div>
    {/* <div className="menu">
      <MenuIcon />
    </div> */}
  </div>
}

function LatestChat({
  contact,
  draft,
  unread,
}: {
  contact: Contact
  draft: string
  unread: number
}) {
  if (draft) {
    return <div className="latest-chat">
      <span className="alert">[草稿]</span>
      {draft}
    </div>
  }

  if (contact.latestChat) {
    // 是否是 at 消息并且 at 了自己，且这条消息未读
    const atSelf =
      unread > 0 &&
      contact.latestChat.type === ChatRecordType.Text &&
      !!contact.latestChat.content.atList.find(v => v.userId === contact.ownerWxid)

    return <div className="latest-chat">
      {atSelf ? <span className="alert">[有人@我]</span> : null}
      <SimpleChatRecord record={contact.latestChat} />
    </div>
  }

  return null
}

const itemPadding = 20
const avatarSize = 48

const s = {
  item: css`
    align-items: center;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    padding: 0 ${itemPadding}px;
    position: relative;
    transition: background-color 0.2s;

    .qun-avatar-image {
      flex-shrink: 0;
    }

    .info {
      bottom: ${itemPadding}px;
      left: ${itemPadding + avatarSize + 10}px;
      overflow: hidden;
      position: absolute;
      right: ${itemPadding}px;
      top: ${itemPadding}px;
    }

    .name-row {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    .name {
      color: #000;
      font-size: 16px;
      letter-spacing: 0.8px;
      line-height: 1.3;
    }
    .time {
      color: rgba(0, 0, 0, 0.35);
      font-size: 12px;
      letter-spacing: 0.6px;
      transition: opacity 0.2s;
    }

    .chat-row {
      position: relative;
    }
    .latest-chat {
      ${ellipsis};
      color: rgba(0, 0, 0, 0.35);
      letter-spacing: 0.7px;
      transition: opacity 0.2s;
      .alert {
        color: ${colors.error};
        margin-right: 0.3em;
      }
    }
    .qywx {
      display: flex;
      left: 0;
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: opacity 0.2s;
      span {
        ${ellipsis};
        background-color: #407fff;
        border-radius: 4px;
        color: #fff;
        font-size: 12px;
        line-height: 1.6;
        padding: 0 6px;
      }
    }

    .menu {
      align-items: center;
      bottom: 0;
      display: flex;
      opacity: 0;
      position: absolute;
      right: ${itemPadding - 4}px;
      top: 0;
      transition: opacity 0.2s;
      width: 0;
      svg {
        padding: 4px;
        font-size: 26px;
      }
    }

    &.current {
      background-color: ${colors.link};
      .name,
      .time,
      .latest-chat {
        color: #fff;
      }
      .qywx span {
        background-color: #fff;
        color: #407fff;
      }
    }

    &:not(.current):hover {
      background-color: #f5f5f5;
    }
    &:hover {
      /* .time {
        opacity: 0;
      } */
      .latest-chat {
        opacity: 0;
      }
      .qywx {
        opacity: 1;
      }
      .menu {
        opacity: 1;
        width: auto;
      }
    }
  `,
}
